<script setup>
import { watchEffect } from 'vue'
import { ref, watch } from 'vue'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    placeholder: {
        type: String,
        default: '',
    },
    type: {
        type: String,
        default: 'text',
    },
    maxLength: {
        type: Number,
        default: 140,
    },
    inputmode: {
        type: String,
        default: 'text',
    },
})
const emit = defineEmits(['update:modelValue'])

const val = ref(props.modelValue)
const inputType = ref(props.type)

watch(
    () => props.type,
    (value) => {
        inputType.value = value
    },
    { immediate: true },
)

watchEffect(() => {
    val.value = props.modelValue
})

function onInput(e) {
    emit('update:modelValue', e.detail.value)
}

function handleEyeClick() {
    inputType.value = inputType.value === 'password' ? 'text' : 'password'
}
</script>

<template>
    <view
        class="flex h-12 items-center rounded-md border border-solid border-zinc-600 px-3 text-base"
    >
        <input
            class="h-12 w-full"
            :value="val"
            :type="inputType"
            :maxlength="maxLength"
            :placeholder="placeholder"
            @input="onInput"
        />
        <view
            v-if="type === 'password' && val"
            class="cursor-pointer"
            @click="handleEyeClick"
        >
            <uni-icons
                :type="inputType === 'password' ? 'eye' : 'eye-slash'"
                :size="20"
                color="#09090b"
            ></uni-icons>
        </view>
        <slot name="suffix"></slot>
    </view>
</template>
